<template>
	<view class="visitorbox">
		<view class="top">
			<view class="text_num">
				<view class="text"><view>访客总量</view></view>
				<view class="number"><view>{{getVisiCount}}</view></view>
			</view>
			<view class="imgbox"><image src="../../../../static/images/dynamic/visitor.png" mode="widthFix"></image></view>
		</view>
		<view class="visitors">
			<template v-if="getVisitors.length>0">
				<view class="v_item" v-for="(item,itemIndex) in getVisitors" :key="item._id" :animation="index == itemIndex ? animationData : {}">
					<view class="v-tip" v-if="!item.unRead">
						<image src="../../../../static/images/dynamic/newvisitor.png" mode="widthFix"></image>
					</view>
					<view class="itembox">
						<view class="avatar"><image :src="item.user.avatars" mode="aspectFill"></image></view>
						<view class="name_date">
							<view>
								<view class="name">{{item.nickName}}</view>
								<view class="date">{{item.date|dateFormat}} 访问了你的空间</view>
							</view>
						</view>
						<view class="btn"><view v-if="!item.isFriend" @tap="goinfo(item.user._id)">加好友</view></view>
						<view class="more"><view @tap="deleteVisitor(itemIndex,item.user._id,item.date)">×</view></view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="no_visitor">暂无访客记录</view>
			</template>
			<!-- <view class="v_item" :animation="index == 1 ? animationData : {}">
					<view class="itembox">
						<view class="avatar"><image src="../../../../static/images/img/one.png" mode="aspectFill"></image></view>
						<view class="name_date">
							<view>
								<view class="name">佩佩刘</view>
								<view class="date">12:21 访问了你的空间</view>
							</view>
						</view>
						<view class="btn"><view>加好友</view></view>
						<view class="more"><view @tap="deleteVisitor(1)">×</view></view>
					</view>
				</view> -->
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import request from '../../../../api/request.js';
export default {
	data() {
		return {
			index: -1,
			animationData: {},
		};
	},
	computed: {
		...mapGetters(['getUser',"getVisitors","getVisiCount","getNewVisitor"])
	},
	beforeDestroy(){
		if(this.getNewVisitor>0){
			this.$store.commit("changeVisiPage",1)
			this.$store.dispatch("updateVisitor")
		}
	},
	methods: {
		// 删除动画
		deleteAnimation() {
			var animation = uni.createAnimation({
				duration: 400,
				timingFunction: 'ease'
			});
			animation.translateX('-100vw').step();
			animation.height('0rpx').step();
			this.animationData = animation.export();
			setTimeout(()=>{
					this.index=-1
			},500)
		},
		// 删除记录
		deleteVisitor(index,id,date) {
			uni.showModal({
				title: '提示',
				content: '确定删除该访客的浏览记录吗',
				success: async res => { 
					if (res.confirm) {
						let res =await this.remove(id,date)
						if(res.status){
							uni.showToast({
								title:res.msg,
								duration:1000
							})
							setTimeout(()=>{
								this.index = index;
								this.deleteAnimation();
							},1000)
							
						}else{
							uni.showToast({
								title:res.msg,
								icon:"none",
								duration:1000
							})
						}
						
						
						// this.$emit("remove",{id,date})
					} else if (res.cancel) {
					}
				}
			});
		},
		// 后端删除访客记录
		async remove (id,date){
			let res = await request({
				url:"/visitor/remove",
				data:{
					token:uni.getStorageSync("token"),
					id,
					date
				},
				method:"POST"
			})
			return res[1].data
		},
		// 去用户详情页
		goinfo(id){
			uni.navigateTo({
				url:"../information/information?id="+id,
			})
		}
		
	}
};
</script>

<style lang="scss" scoped>
.visitorbox {
	overflow: hidden;
	box-sizing: border-box;
	padding-top: 60rpx;
	.top {
		border-bottom: 8rpx solid #e6e6e6;
		height: 90rpx;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: row-reverse;
		.text_num {
			display: flex;
			font-size: 28rpx;
			text-align: right;
			color: #818181;
			.text {
				margin-right: 10rpx;
				line-height: 60rpx;
				height: 60rpx;
			}
			.number {
				line-height: 60rpx;
				height: 60rpx;
			}
		}
		.imgbox {
			width: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 50rpx;
				height: 100%;
			}
		}
	}
	.visitors {
		.v_item {
			position: relative;
			height: 130rpx;
			.v-tip{
				position: absolute;
				top: -2rpx;
				left: -4rpx;
				width: 60rpx;
				height: 60rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.itembox {
				padding: 20rpx 20rpx;
				display: flex;
				.avatar {
					flex: 2;
					display: flex;
					justify-content: center;
					align-items: center;
					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 10rpx;
					}
				}
				.name_date {
					flex: 5;
					margin: 0rpx 20rpx;
					display: flex;
					align-items: center;
					.name {
						font-size: 34rpx;
					}
					.date {
						font-size: 26rpx;
						color: #989898;
					}
				}
				.btn {
					flex: 2;
					display: flex;
					justify-content: center;
					align-items: center;
					view {
						border-radius: 10rpx;
						background: #3f536e;
						font-size: 28rpx;
						padding: 10rpx 20rpx;
						color: white;
					}
				}
				.more {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					view {
						font-size: 40rpx;
						padding-left: 30rpx;
						width: 30rpx;
						height: 60rpx;
					}
				}
			}
		}
		.no_visitor{
			height: 20vh;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #ccc;
		}
	}
	.visitors .v_item:not(:last-child) {
		border-bottom: 2rpx solid #ccc;
	}
}
</style>
